// login 组件的大致框架
// 应用内部提供API接口


// 视图方面可自定义
<template class="loginBox">
    <div class="loginItem">
        <img
            src="http://10.112.16.136:8989/base-file/images/login.jpeg"
            style="display: inline; vertical-align: sub; width: 100%"
        />
        <div style="text-align: left">
            <h4>欢迎登陆~</h4>
        </div>
        <el-form :model="ruleForm" class="form" status-icon :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
        <span slot="label">
          <i class="el-icon-user"/>
      </span>
                <el-input style="width:90%" v-model.number="ruleForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
        <span slot="label">
          <i class="el-icon-lock"/>
      </span>
                <el-input type="password" style="width:90%" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
        <span slot="label">
          <i class="el-icon-s-check"/>
      </span>
                <el-input type="password" style="width:90%" v-model="ruleForm.checkPass" placeholder="请再次输入密码" autocomplete="off"></el-input>
            </el-form-item>
            <div>
        <span slot="label" style="float: left;cursor: pointer">
          <i class="el-icon-question"/>
          <el-button type="text" @click="forgetPassword">忘记密码</el-button>
      </span>
                <span slot="label" style="float: right;cursor: pointer">
          <i class="el-icon-user-solid"/>
          <el-button type="text" @click="register">注册用户</el-button>
      </span>
            </div>
        </el-form>
        <div class="button">
            <el-button type="primary" @click="submitForm">登陆</el-button>
        </div>
    </div>
</template>

// JS方面
<script>
// 引入的API接口注释，后期部署会自动反注释
// &*?import http from "@/api";
// &*?import {setToken} from "@/utils/auth";
import http from "@/api";
export default {
    name: "Login",
    data() {
        var checkUsername = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }else {
                callback()
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                password: '',
                checkPass: '',
                username: ''
            },
            rules: {
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        // 提交函数，与Login的组件绑定
        // API的返回值{code:"...",data:{Token:"..."},}
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // 登陆的API，参数为username，password
                    http.login({ username: this.ruleForm.username,password: this.ruleForm.password }).then(res => {
                        // 返回200成功
                        if (res.code === 200) {
                            // 保存token在本地
                            this.$store.commit('user/SET_TOKEN', res.data.Token)
                            // cookie中保存Token
                            setToken(res.data.Token)
                            // 设计组件时可以预留跳转接口
                            this.$bus.$emit("login-to-another-page");
                            // code 为110 说明token过期
                        } else if (res.code === 110) {
                            http.updateToken({token:res.data.TokenEX}).then(res => {
                                this.$store.commit('user/SET_TOKEN', res.data.token)
                                setToken(res.data.token)
                                this.$bus.$emit("login-to-another-page");
                            })
                        } else {
                            this.$message(res.msg + ':' + res.data)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        register(){
            // 注册跳转界面
            this.$router.push({ path: '/register' })
            // this.$bus.$emit("login-to-register-page")
        },
        forgetPassword(){
            // 忘记密码跳转界面
            this.$bus.$emit("login-to-forgetPassword-page")
        }
    }
}
</script>
<style scoped>
.remember-me {
    float: left
}
.loginBox {
    width: 100%;
    text-align: center;
}
.loginItem{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 5%;
    text-align: center;
}
.button button{
    margin-top:10%;
    width:80%;
}

.el-form-item{
    margin-bottom: 15%;
}
</style>